<template>
  <!-- 登录页 -->
  <div id="app">
    <mt-header title="医 院 管 理 系 统" class="header"></mt-header>
    <div class="main">
      <p>请登录</p>
      <!-- 登录表单 -->
      <mt-field
        label="账号"
        placeholder="请输入账号"
        v-model="userLogin.username"
      ></mt-field>
      <mt-field
        label="密码"
        placeholder="请输入密码"
        type="password"
        v-model="userLogin.password"
      ></mt-field>
      <div class="codeNum">
        <mt-field
          label="验证码"
          placeholder="请输入验证码"
          v-model="userLogin.code"
        ></mt-field>
        <img
          :src="imgUrl"
          alt=""
          class="imgcode"
          ref="imgcode"
          @click="codeNum"
        />
      </div>

      <!-- 登录注册 -->
      <div class="btns">
        <mt-button type="primary" size="normal" @click="login" class="login"
          >登录</mt-button
        >
        <mt-button type="primary" size="normal" @click="register"
          >注册</mt-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";

export default {
  name: "Login",
  data() {
    return {
      imgUrl: "http://121.5.47.223:8888/sys/user/captcha?r=" + Math.random(),
      //登录用户账号密码
      userLogin: {
        username: "admin",
        password: "111111",
        token: null,
        code: "", //验证码
      },
    };
  },
  created() {},
  methods: {
    //登录点击，先进行表单验证
    login() {
      if (this.userLogin.username == "" || this.userLogin.password == "") {
        Toast({
          message: "请输入账号或密码",
          duration: "1000",
        });
      } else if (this.userLogin.code == "") {
        Toast({
          message: "请输入验证码",
          duration: "1000",
        });
      } else {
        //验证通过，调用登录接口
        this.ToLogin();
      }
    },
    //调用登录接口
    ToLogin() {
      //window.localStorage.setItem("userName", "桁桁");
      //window.localStorage.setItem("uid", "001");
      //验证通过后，提示‘登录成功’，1.5s后跳转到首页
      this.$http
        .post(
          "login?username=" +
            this.userLogin.username +
            "&password=" +
            this.userLogin.password +
            "&code=" +
            this.userLogin.code +
            "&token=" +
            this.userLogin.token,
          {}
        )
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            //全局存储身份验证token
            window.localStorage.setItem("token", res.headers.authorization);
            Toast({
              message: "登录成功",
              duration: "1000",
            });
            setTimeout(() => {
              this.$router.push({
                path: "/index",
              });
            }, 1500);
          } else {
            Toast({
              message: res.data.message,
              duration: "1000",
            });
          }
        });
    },
    register() {
      //跳转注册页
      this.$router.push({
        path: "/register",
      });
    },
    //验证码点击事件
    codeNum() {
      let random = Math.random();
      this.userLogin.token = random;
      this.$refs.imgcode.src =
        "http://121.5.47.223:8888/sys/user/captcha?r=" + random;
    },
  },
};
</script>

<style lang='less' scoped>
@import "~@/assets/style/index.css";
#app /deep/ .mint-header-title {
  overflow: initial;
}
.header {
  background-color: #26a50f;
}

.main {
  margin-top: 40px;
  padding: 0 20px;
  p {
    margin-bottom: 50px;
    padding-top: 30px;
    font-size: 30px;
    text-align: center;
  }
  .btns {
    margin: 200px auto;
    text-align: center;
  }
  .login {
    background-color: #26a50f;
  }
  .mint-button {
    margin: 0 15px 0 15px;
    padding: 0 25px 0 25px;
  }
}
.codeNum {
  margin-top: 15px;
  display: flex;
  img {
    height: 48px;
    width: 105px;
  }
}
</style>
